<template>
  <div class="charttwo">
    <div class="button-group">
      <button :class="chartType=='zcz'?'active':''" @click="changeType('zcz')">总产值</button>
      <button :class="chartType=='lirun'?'active':''" @click="changeType('lirun')">利润</button>
      <button :class="chartType=='nasuie'?'active':''" @click="changeType('nasuie')">纳税额</button>
    </div>
    <div id="charttwopiechart"></div>
    <div id="charttwobarchart"></div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";

export default {
  name: "charttwo",
  components: {},
  props: [],
  data() {
    return {
      chartType: "zcz",
      myChartPie: null,
      myChartBar: null
    };
  },
  computed: {},
  watch: {},
  mounted() {
    this.initPieChart();
    this.initBarChart();
  },
  beforeDestroy() {},
  methods: {
    changeType(type) {
      let that = this;
      switch (type) {
        case "zcz":
          that.chartType = "zcz";
          that.myChartPie.clear();
          that.myChartBar.clear();
          that.myChartPie.setOption(that.getOption1("总产值"));
          that.myChartBar.setOption(that.getOption2("总产值"));
          break;
        case "lirun":
          that.chartType = "lirun";
          that.myChartPie.clear();
          that.myChartBar.clear();
          that.myChartPie.setOption(that.getOption1("利润"));
          that.myChartBar.setOption(that.getOption2("利润"));
          break;
        case "nasuie":
          that.chartType = "nasuie";
          that.myChartPie.clear();
          that.myChartBar.clear();
          that.myChartPie.setOption(that.getOption1("纳税额"));
          that.myChartBar.setOption(that.getOption2("纳税额"));
          break;
        default:
          break;
      }
    },
    initPieChart() {
      // 基于准备好的dom，初始化echarts实例
      this.myChartPie = echarts.init(
        document.getElementById("charttwopiechart")
      );
      this.myChartPie.setOption(this.getOption1("总产值"));
    },
    initBarChart() {
      // 基于准备好的dom，初始化echarts实例
      this.myChartBar = echarts.init(
        document.getElementById("charttwobarchart")
      );
      this.myChartBar.setOption(this.getOption2("总产值"));
    },
    getOption1(name) {
      let colors = ["#FF7C67", "#0FF9FF", "#BEC853", "#BEC853", "#7C6594"];
      var option = {
        color: colors,
        title: {
          text: "行业分类" + name + "统计图",
          left: "center",
          textStyle: {
            color: "#FFAF51"
          }
        },
        tooltip: {
          trigger: "item",
          formatter: function(item) {
            var inhtml =
              item.marker + item.name + "&nbsp;" + item.seriesName + "<br/>";
            if (item.value < 10000) {
              inhtml +=
                "<label style='color:" +
                item.color +
                ";'>" +
                item.value +
                "</label>&nbsp;万元&nbsp;(" +
                item.percent +
                "%)";
            } else {
              var val = Math.round(item.value / 1000) / 10;
              inhtml +=
                "<label style='color:" +
                item.color +
                ";'>" +
                val +
                "</label>&nbsp;亿元&nbsp;(" +
                item.percent +
                "%)";
            }
            return inhtml;
          }
        },
        toolbox: {
          show: true,
          feature: {
            magicType: {
              show: true,
              type: ["pie", "funnel"]
            }
          }
        },
        calculable: true,
        series: [
          {
            name: name,
            type: "pie",
            radius: [20, 85],
            center: ["50%", "50%"],
            minAngle: 10,
            roseType: "area", //radius  area
            data: [
              {
                name: "信息技术",
                value: 5065987
              },
              {
                name: "其它",
                value: 6082719
              },
              {
                name: "建筑公司",
                value: 179408
              },
              {
                name: "机械电子",
                value: 2200717
              },
              {
                name: "冶金化工",
                value: 186425
              },
              {
                name: "广告装饰",
                value: 152182
              },
              {
                name: "医药公司",
                value: 41974
              }
            ]
          }
        ]
      };
      return option;
    },
    getOption2(name) {
      let colors = ["#0FF9FF", "#d14a61", "#675bba"];
      let arrObj = [
        { name: "数丰科技", value: 25006 },
        { name: "玉茗堂茶业", value: 25014 },
        { name: "萝卜思", value: 25168 },
        { name: "京东方光电", value: 25215 },
        { name: "宇博建筑安装工程", value: 25530 },
        { name: "中亚科技", value: 25659 },
        { name: "轩辕精密电子", value: 25695 },
        { name: "美菱", value: 25862 },
        { name: "易百互联网科技", value: 25905 },
        { name: "道特威尔机械", value: 25981 },
        { name: "凯辉信息科技", value: 26111 },
        { name: "申利玻璃", value: 26438 },
        { name: "圣泽农业科技", value: 26847 },
        { name: "始一电子科技", value: 26917 },
        { name: "华海金属", value: 27223 },
        { name: "嵩超劳保用品", value: 27460 },
        { name: "赛亚", value: 27655 },
        { name: "壹物新材料", value: 27683 },
        { name: "华方医药科技", value: 27793 },
        { name: "惠洲地质安全研究院", value: 27974 },
        { name: "时泰土方", value: 28144 },
        { name: "玖恒金融", value: 28623 },
        { name: "珈冕科技", value: 28630 },
        { name: "光磊建筑劳务", value: 28793 },
        { name: "济成科技", value: 28905 },
        { name: "神剑科技", value: 29021 },
        { name: "富煌建筑设计研究", value: 29136 },
        { name: "编后软件科技", value: 29161 },
        { name: "俊岭机械工程", value: 29669 },
        { name: "驰川建设工程", value: 30174 },
        { name: "波动体育文化", value: 30390 },
        { name: "水安恒信劳务", value: 30481 },
        { name: "浮云文化传媒", value: 30664 },
        { name: "六度房地产", value: 31619 },
        { name: "锦鸿石材", value: 31844 },
        { name: "麦迹数码科技", value: 31932 },
        { name: "恒大地产集团", value: 32176 },
        { name: "融达复合粉体科技", value: 32327 },
        { name: "金科建筑工程", value: 33009 },
        { name: "太格科技", value: 33639 },
        { name: "华实酒店用品", value: 34618 },
        { name: "迪普斯医疗", value: 34850 },
        { name: "龙讯信息科技", value: 34989 },
        { name: "日新印务", value: 35010 },
        { name: "恒力装备", value: 35699 },
        { name: "象网汇科技", value: 36077 },
        { name: "科天化工", value: 36569 },
        { name: "华动文化传媒", value: 36756 },
        { name: "南瑞中天电力电子", value: 36992 },
        { name: "林美机电设备", value: 38297 },
        { name: "美菱股份制造三厂", value: 38702 },
        { name: "钜祥电子科技", value: 39394 },
        { name: "火峰电气", value: 39407 },
        { name: "合帝网络", value: 39503 },
        { name: "易凡电器", value: 39520 },
        { name: "紫兰科技", value: 41098 },
        { name: "继远电网技术", value: 41108 },
        { name: "力成轴承", value: 41911 },
        { name: "鲸鲨互联网科技", value: 42291 },
        { name: "致柔软装艺术设计", value: 43660 },
        { name: "好牛软件", value: 44108 },
        { name: "天鹰高科技", value: 44228 },
        { name: "景路数据科技", value: 44306 },
        { name: "金彩光电科技", value: 44849 },
        { name: "洋茂服饰", value: 45034 },
        { name: "加亦信息科技", value: 45368 },
        { name: "途秀互动", value: 45708 },
        { name: "中网创投科技", value: 46211 },
        { name: "睿豚信息科技", value: 46524 },
        { name: "知管家知识产权代理", value: 46687 },
        { name: "万灯科技", value: 47919 },
        { name: "普斯机电设备", value: 48052 },
        { name: "博诺思信息科技", value: 48203 },
        { name: "中荷环保", value: 48606 },
        { name: "鼎福食品", value: 49382 },
        { name: "奥德里奇机电设备", value: 49564 },
        { name: "潇飞信息", value: 50039 },
        { name: "天琛环保节能科技", value: 50076 },
        { name: "德燚信息咨询", value: 50948 },
        { name: "科尚电子科技", value: 51037 },
        { name: "婉卿信息科技", value: 51074 },
        { name: "印优图文广告设计", value: 52026 },
        { name: "老板厨房电器", value: 52664 },
        { name: "时旭智能科技", value: 53036 },
        { name: "君正科技", value: 53156 },
        { name: "肯耐博", value: 53869 },
        { name: "大正印刷", value: 54606 },
        { name: "瑞丽宜家家居", value: 54814 },
        { name: "数科科技", value: 54890 },
        { name: "一笑堂茶业", value: 55098 },
        { name: "思诺威文化传媒", value: 55145 },
        { name: "汇智化工技术", value: 55426 },
        { name: "普元生物科技", value: 55430 },
        { name: "容纳精密机械", value: 56907 },
        { name: "范特西信息科技", value: 57769 },
        { name: "安特姆工程机械", value: 57923 },
        { name: "群新智能科技", value: 58247 },
        { name: "光华科技", value: 59481 },
        { name: "阿里巴巴网络技术公司办事处", value: 59697 },
        { name: "齐峰科技发展", value: 59946 },
        { name: "蝶商互联科技", value: 60212 },
        { name: "景岚科技", value: 62070 },
        { name: "广融信息技术", value: 62504 },
        { name: "汉思信息技术", value: 66308 },
        { name: "天锦货运", value: 66954 },
        { name: "墨扬焊割设备", value: 67092 },
        { name: "飞凡教育科技", value: 67907 },
        { name: "云盟信息科技", value: 68907 },
        { name: "启迪科技投资", value: 69008 },
        { name: "网状网电子科技", value: 69236 },
        { name: "新主角公关顾问", value: 69251 },
        { name: "百诚慧通科技", value: 70319 },
        { name: "钰熙商业摄影", value: 70648 },
        { name: "容知日新科技", value: 70936 },
        { name: "卡诺汽车空调", value: 71274 },
        { name: "和瑞机械制造", value: 71284 },
        { name: "力正液压机械", value: 71644 },
        { name: "上联信息科技", value: 73162 },
        { name: "蓝光智能科技", value: 73777 },
        { name: "华兴机器人", value: 74265 },
        { name: "澜山室内设计工程", value: 74441 },
        { name: "安泰科技", value: 74687 },
        { name: "千界信息科技", value: 74824 },
        { name: "华开立远智能科技", value: 75517 },
        { name: "中意制冷工程", value: 75534 },
        { name: "合大环境工程研究院", value: 77436 },
        { name: "丰泽机械", value: 77657 },
        { name: "云栖信息科技", value: 78095 },
        { name: "依天侍人信息科技", value: 80608 },
        { name: "光启信息科技", value: 80859 },
        { name: "欧惠浦科技", value: 80923 },
        { name: "机械工业设计院", value: 81745 },
        { name: "美乐图文设计", value: 81786 },
        { name: "兴博建材", value: 87567 },
        { name: "贵博电力科技", value: 88849 },
        { name: "张平机械工程", value: 89186 },
        { name: "凯创电子科技", value: 89759 },
        { name: "华派化工设备", value: 91438 },
        { name: "达力信息科技", value: 91591 },
        { name: "春协环保科技", value: 91905 },
        { name: "缘定此生婚庆婚礼策划服务", value: 95124 },
        { name: "商帝厨卫设备", value: 96125 },
        { name: "仁泰生物科技", value: 96297 },
        { name: "超美机电", value: 97430 },
        { name: "尚好家家居科技", value: 97487 },
        { name: "毅博自动化科技", value: 97546 },
        { name: "胜荣电子电器", value: 98616 },
        { name: "青柠檬国际旅行社", value: 98788 },
        { name: "欣语信息科技", value: 99168 },
        { name: "联海智能科技", value: 99431 },
        { name: "桃花潭酒业办事处", value: 99957 },
        { name: "鼎坤智能科技", value: 101092 },
        { name: "凌志智能科技", value: 102231 },
        { name: "金雪制冷", value: 103431 },
        { name: "永泽生物科技", value: 104901 },
        { name: "未来种业", value: 105494 },
        { name: "山胜电子科技", value: 106751 },
        { name: "四友食品", value: 110905 },
        { name: "博耀信息科技", value: 111389 },
        { name: "保力国际旅行社", value: 113689 },
        { name: "国安电气", value: 113820 },
        { name: "联商信息科技", value: 114748 },
        { name: "众迈机电", value: 115597 },
        { name: "巨神起重设备", value: 116505 },
        { name: "和越制衣", value: 117065 },
        { name: "佳恩特机械制造", value: 118376 },
        { name: "埃米特信息技术", value: 120182 },
        { name: "山宝矿山工程机械", value: 120560 },
        { name: "汇能信息技术", value: 121085 },
        { name: "悦目生物科技", value: 123359 },
        { name: "海茗兰科技", value: 124246 },
        { name: "澜阔广告", value: 125077 },
        { name: "淮创电子科技", value: 125636 },
        { name: "畅想照明科技", value: 128216 },
        { name: "普印特信息科技", value: 130498 },
        { name: "风派网络传媒", value: 136482 },
        { name: "喔噻互联网科技", value: 142408 },
        { name: "黑玫茶叶", value: 148344 },
        { name: "斌达石化科技", value: 149387 },
        { name: "和联电子", value: 151744 },
        { name: "森果网络传媒", value: 153603 },
        { name: "南巽建筑规划设计院", value: 154559 },
        { name: "讯海通信科技", value: 154987 },
        { name: "日之升电子科技", value: 155062 },
        { name: "泰升典当", value: 155863 },
        { name: "淘云科技", value: 164229 },
        { name: "文峰电子科技集团", value: 177317 },
        { name: "春天广告", value: 177672 },
        { name: "维麦文化传媒", value: 177777 },
        { name: "华科信息科技", value: 184651 },
        { name: "大尺度网络传媒", value: 194356 }
      ];
      var arrNames = [];
      var arrValues = [];
      for (var index = 0; index < arrObj.length; index++) {
        var item = arrObj[index];

        arrNames.push(arrObj.length - index + "." + item.name);
        arrValues.push(item.value);
      }

      var option = {
        color: colors,
        title: {
          text: "企业" + name + "排名",
          left: "center",
          textStyle: {
            color: "#FFAF51"
          }
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: function(params) {
            var inhtml = "";
            for (var i in params) {
              var item = params[i];
              if (item == null || item.value == null) continue;

              inhtml += item.marker + item.seriesName + "&nbsp;";

              if (item.value == 0) {
                inhtml += "无数据<br />";
                continue;
              } else if (item.value < 10000) {
                inhtml +=
                  "<label style='color:" +
                  item.color +
                  ";'>" +
                  item.value +
                  "</label>&nbsp;万元";
              } else {
                var val = Math.round(item.value / 1000) / 10;
                inhtml +=
                  "<label style='color:" +
                  item.color +
                  ";'>" +
                  val +
                  "</label>&nbsp;亿元";
              }
            }
            return inhtml;
          }
        },
        grid: {
          left: "3%",
          right: "3%",
          bottom: 30,
          containLabel: true
        },
        xAxis: {
          type: "value",
          axisLabel: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#474747'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#474747'
            }
          }
        },
        yAxis: {
          type: "category",
          data: arrNames,
          axisLabel: {
            color: "rgba(255,255,255,0.8)"
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#474747'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#474747'
            }
          }
        },
        dataZoom: [
          {
            type: "inside",
            start: Math.ceil(((arrObj.length - 10) * 100) / arrObj.length), //数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。
            end: 100, //数据窗口范围的结束百分比。范围是：0 ~ 100。
            yAxisIndex: 0
          },
          {
            type: "slider",
            yAxisIndex: 0,
            width: 10,
            height: "65%",
            right: 0
          }
        ],
        series: [
          {
            name: name,
            type: "bar",
            data: arrObj
          }
        ]
      };
      return option;
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "../css/rule.scss";
.charttwo {
  background-color: rgba(0, 48, 64, 0.6) !important;
  border: 1px solid #73ffff !important;
  border-radius: 5px !important;
  width: 300px;
  height: calc(100% - 10px);
  position: fixed;
  right: 5px;
  top: 5px;
  #charttwopiechart {
    width: 100%;
    height: 40%;
  }
  #charttwobarchart {
    width: 100%;
    height: 55%;
  }
  .button-group {
    margin-bottom: 10px;
    text-align: center;
    margin-top: 10px;
    button {
      background-color: rgba(32, 160, 255, 0.2);
      padding: 3px 10px;
      font-size: 12px;
      line-height: 1.5;
      border-radius: 2px;
      color: $fontColorW;
      border-color: #20a0ff;
      border: 1px solid transparent;
      cursor: pointer;
    }
    button:first-child:not(:last-child):not(.dropdown-toggle) {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
    button.active,button:active,button:visited{
        background-color: #4e97d9;
        border-color: #4e97d9;
    }
  }
}
</style>


